<template>
  <div class="container">
    <el-page-header
      @back="goBack"
      title="通知公告"
      style="padding: 10px 20px"
    />
    <!--    表单区域-->
    <el-form :model="noticeForm" label-width="120px">
      <el-form-item label="通知标题" prop="title">
        <el-input
          placeholder="请输入标题"
          v-model="noticeForm.title"
          size="small"
          style="width: 300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="发布日期" prop="publishTime">
        <el-date-picker
          v-model="noticeForm.publishTime"
          type="datetime"
          size="small"
          style="width: 300px"
          value-format="YYYY-MM-DD"
          placeholder="选择发布日期"
        />
      </el-form-item>
      <el-form-item label="通知范围" prop="scope">
        <el-select
          v-model="showState"
          class="m-2"
          placeholder="请选择类型"
          size="small"
          style="width: 300px"
          @change="changeSelect"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          v-show="showState === '1'"
          type="primary"
          size="small"
          style="margin-left: 10px"
          @click="showDialog"
          >选择通知范围</el-button
        >
      </el-form-item>
      <el-form-item label="正文" prop="content">
        <!--        富文本区域-->
        <MyEditor
          ref="editor"
          :value="noticeForm.content"
          v-model="noticeForm.content"
        ></MyEditor>
      </el-form-item>
      <div class="footer-btn">
        <el-button type="primary" size="small" @click="addNotice"
          >提交</el-button
        >
        <el-button size="small">取消</el-button>
      </div>
    </el-form>
  </div>
  <!--  选择单位对话框-->
  <el-dialog
    v-model="dialogVisible"
    title="选择通知范围"
    width="30%"
    :before-close="handleClose"
  >
    <div class="tree-content">
      <el-tree
        default-expand-all
        ref="treeRef"
        :data="departmentOptions"
        :props="defaultProps"
        node-key="id"
        show-checkbox
        :default-checked-keys="chooseData"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" type="primary" @click="submitTree"
          >确定</el-button
        >
        <el-button @click="handleClose" size="small">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
//引入富文本组件
import MyEditor from "../../../components/MyEditor";
import {
  department,
  addNotices,
  detail,
  updateNotice,
} from "@/api/message/notice";
import { ElMessage } from "element-plus";
const editor = ref(null);
const router = useRouter();
const noticeID = ref("");
const route = useRoute();
const treeRef = ref(null);
//返回上一页面
function goBack() {
  router.back();
}
//表单数据
const noticeForm = ref({});
//选择类型数据
const typeOptions = ref([
  {
    label: "公开",
    value: "0",
  },
  {
    label: "私有",
    value: "1",
  },
]);
//部门数据
const departmentOptions = ref([]);
//下拉框改变事件
function changeSelect(val) {
  showState.value = val;
}
//右侧级联选择是否禁用状态控制
const showState = ref("请选择");
//获取部门数据
function getDepartment() {
  department(0).then((res) => {
    departmentOptions.value = res.data;
  });
}
//对话框显示与隐藏
const dialogVisible = ref(false);
//添加通知公告
function addNotice() {
  if (!noticeID.value) {
    addNotices({
      title: noticeForm.value.title,
      publishTime: noticeForm.value.publishTime,
      content: editor.value.textContent,
      scope: showState.value === "0" ? [] : chooseData.value,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("添加通知成功");
        router.back();
      }
    });
  } else {
    //  编辑通知公告
    updateNotice({
      id: noticeID.value,
      title: noticeForm.value.title,
      publishTime: noticeForm.value.publishTime,
      content: editor.value.textContent,
      scope: showState.value === "0" ? [] : chooseData.value,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改通知成功");
        router.back();
      }
    });
  }
}
//对话框关闭之前的回调
function handleClose() {
  dialogVisible.value = false;
  chooseData.value = [];
}
//打开对话框
function showDialog() {
  dialogVisible.value = true;
}
const defaultProps = {
  children: "children",
  label: "name",
};
const chooseData = ref([]);
function submitTree() {
  chooseData.value = treeRef.value.getCheckedNodes(true, false);
  chooseData.value = chooseData.value.map((item) => item.id);
  dialogVisible.value = false;
}
//获取通知详情信息
function getDetail() {
  detail(noticeID.value).then((res) => {
    noticeForm.value = res.data;
    chooseData.value = res.data.scopes.map((item) => item.id);
    if (noticeForm.value.scopes.length > 0) {
      showState.value = "1";
    }
  });
}
onMounted(() => {
  noticeID.value = route.query.id;
  if (!noticeID.value) {
    route.meta.title = "新增通知公告";
  } else {
    route.meta.title = "编辑通知公告";
    getDetail();
  }
  getDepartment();
});
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 220px);
  background: #ffffff;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
  .el-form {
    padding: 20px;
    .footer-btn {
      text-align: center;
    }
  }
}
.tree-content {
  height: 400px;
  overflow-y: auto;
}
</style>
